<template>
	<view class="wrap">
		<!-- <view class="tab_box">
            <view class="tab_item" :class="tabIndex == index ? `active active${index}` : ''"
                v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
                <text class="name"> {{ item.name }}</text>
            </view>
        </view> -->
		<view class="form-wrap">
			<view v-if="tabIndex == 0">
				<view class="stab-box" :class="{
					'bg-rg': current === 2,
					'bg-lf': current === 1
				}">
					<view :class="current == 1 ? 'stab-item active' : 'stab-item'" @click="tabChange(1)">
						<text class="exact">税务匹配</text>
					</view>
					<view :class="current == 2 ? 'stab-item active' : 'stab-item'" @click="tabChange(2)">
						<text class="exact">答题匹配 </text>
					</view>
				</view>
				<informationForm @openShareLog="openShareLog" :current="current"></informationForm>
			</view>
			<view v-else class="main-box">
				<shoperMatchForm @openShareLog="openShareLog" :current="current"></shoperMatchForm>
			</view>
		</view>

		<share-another v-if="isShareShow" ref="another" @close="isShareShow = false"></share-another>
	</view>
</template>

<script>
import shoperMatchForm from './shoperMatchForm.vue'
import informationForm from './informationForm.vue'
import shareAnother from '@/pagesWater/taxSearch/components/shareAnother.vue'
import { loadAnotherBase64 } from '../../../pagesWater/taxSearch/base64.js'
export default {
	components: {
		informationForm,
		shoperMatchForm,
		shareAnother
	},
	data() {
		return {
			tabIndex: 0,
			tabList: [{
				name: '企业',
				id: 1
			}, {
				name: '个体工商户',
				id: 2
			}],
			current: 1,
			isShareShow: false
		}
	},
	methods: {
		openShareLog() {
			this.isShareShow = true
			this.$nextTick(() => {
				this.$refs.another.open({ imgbgBase64: loadAnotherBase64 })
			})
		},
		tabChange(v) {
			this.current = v
		},
		changeTab(index) {
			this.tabIndex = index

		},
	}
}
</script>

<style lang="scss" scoped>
.wrap {

	margin: 0 30rpx;

	.tab_box {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		height: 87rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background: #F7F7F7;


		.tab_item.active {
			position: relative;
			height: 110rpx;
			line-height: 110rpx;
			background: #fff;
			font-weight: 600;
			font-size: 36rpx;
			color: #2872FD;

			.name {
				display: inline-block;
				transform: translateY(15rpx);
			}



			&::after {
				position: absolute;
				content: "";
				width: 60rpx;
				height: 60rpx;
				right: -60rpx;
				bottom: 0;

			}

			&::before {
				position: absolute;
				content: "";
				width: 60rpx;
				height: 60rpx;
				bottom: 0;
				left: -60rpx;
			}
		}



		.active0 {
			border-radius: 20rpx 30rpx 0 0;

			&::after {
				background: radial-gradient(circle at 70rpx 0, transparent 70rpx, #fff 60rpx);
			}
		}

		.active1 {
			border-radius: 20rpx 40rpx 0 0;

			&::before {
				background: radial-gradient(circle at 0 0, transparent 60rpx, #fff 60rpx);
			}
		}

		.active2 {
			border-radius: 24rpx 0 0 0;

			&::before {
				background: radial-gradient(circle at 0 0, transparent 60rpx, #fff 60rpx);
			}
		}

		.tab_item {
			position: relative;
			width: 49%;
			text-align: center;
			line-height: 87rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
		}
	}

	.main-box {
		width: 90%;
		margin: 50rpx auto 0;
	}

	.stab-box {
		display: flex;
		background-size: 100%;


		&.bg-rg {
			background-image: url('/static/image/switch/right.png');
		}

		&.bg-lf {
			background-image: url('/static/image/switch/left.png');
		}

		.stab-item {
			flex: 1;
			text-align: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #333;
			line-height: 50rpx;
			position: relative;
			padding: 37rpx 0 27rpx;
			color: #333;

			&.active {

				color: #2872fd;
			}

		}

	}
}
</style>